<script setup lang="ts" name="SelectTeam">
import { onMounted, ref } from "vue";
import { type ConfigProviderThemeVars, showFailToast } from "vant";
import { GetTeamTree } from "@/api/tally";
import { deepClone } from "vant/es/utils/deep-clone";

const themeVars: ConfigProviderThemeVars = {
  searchContentBackground: "#ffffff",
  searchPadding: "0px",
  buttonSmallHeight: "30px",
  buttonSmallPadding: "12px",
  buttonDefaultHeight: "35px",
  buttonIconSize: "10px",
  searchBackground: "transparent",
  pickerBackground: "#efefef"
};

onMounted(() => {
  getTeamTree();
});

const res = ref();
const emit = defineEmits(["isOpen", "selectedTeam"]);
const emptyCol = [
  {
    text: "暂无数据",
    value: "0",
    children: [
      {
        text: "暂无数据",
        value: "0",
        children: [
          {
            text: "暂无数据",
            value: "0"
          }
        ]
      }
    ]
  }
];
const isSearching = ref(false);
const keyword = ref("");
const teamTree = ref(emptyCol);
const originTeamTree = ref([]);

function getTeamTree() {
  isSearching.value = true;
  GetTeamTree()
    .then((res: any) => {
      teamTree.value = emptyCol;
      if (res.success && res.data.length > 0) {
        teamTree.value = res.data;
      }
      isSearching.value = false;
    })
    .catch(() => {
      isSearching.value = false;
    });
}

function returnRes() {
  if (res.value[0] === "0" || res.value.length !== 3) {
    showFailToast("请选择有效队组");
    return;
  }

  const result = {
    company: "",
    companyName: "",
    team: "",
    teamName: "",
    group: "",
    groupName: "",
    info: "",
    originData: []
  };

  result.originData = deepClone(res.value);
  for (let i = 0; i < res.value.length; i++) {
    const split = res.value[i].split("-");
    if (i === 0) {
      result.company = split[0];
      result.companyName = split[1];
    }
    if (i === 1) {
      result.team = split[0];
      result.teamName = split[1];
    }
    if (i === 2) {
      result.group = split[0];
      result.groupName = split[1];
    }
  }
  result.info =
    result.companyName + "-" + result.teamName + "-" + result.groupName;
  emit("selectedTeam", result);
  showPop(false);
}

function showPop(show: boolean) {
  emit("isOpen", show);
}
</script>

<template>
  <div class="flex-col h-[auto] p-[20px] w-full" style="background: #f6f6f6">
    <van-config-provider :theme-vars="themeVars">
      <div class="flex h-[30px] justify-between">
        <div
          class="flex justify-center items-center h-full text-center text-base font-bold"
        >
          选择队组
        </div>
        <div
          class="flex h-full justify-center items-center text-center text-base"
        >
          <div class="text-blue-500 font-bold" @click="returnRes">确定</div>
        </div>
      </div>
      <div class="flex flex-col w-[100%] flex-1 mt-[10px]">
        <div class="mt-[10px]">
          <van-picker :show-toolbar="false" :columns="teamTree" v-model="res" />
        </div>
      </div>
    </van-config-provider>
  </div>
</template>

<style scoped></style>
